<!--
 * @Date: 2023-10-17 17:35:40
 * @Auth: 463997479@qq.com
 * @LastEditors: 463997479@qq.com
 * @LastEditTime: 2024-03-08 15:53:05
 * @FilePath: \ztc-web\src\views\assessment\index.vue
-->

<template>
  <div style="padding: 10px 20px">
    <d-table-search
      :columns="columns"
      :request="handleRequest"
      title=""
      :header-cell-style="{
        background: '#f5f7fa',
      }"
      :pagination="{
        background: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        small: 'small',
        pageSizes: [10, 200, 300, 400],
      }"
      :showResearch="true"
      :hasSearch="true"
      :has-page="true"
      border
      ref="tableRef"
    >
      <template #searchData="{ search }">
        <el-space>
          <el-form-item prop="quarter">
            <el-select v-model="search.quarter" placeholder="请选择季度">
              <el-option label="第一季度" :value="1" />
              <el-option label="第二季度" :value="2" />
              <el-option label="第三季度" :value="3" />
              <el-option label="第四季度" :value="4" />
            </el-select>
          </el-form-item>
        </el-space>
        <el-space>
          <el-form-item prop="plateNo">
            <el-input placeholder="请输入车牌" v-model="search.plateNo" />
          </el-form-item>
        </el-space>
        <el-space>
          <el-form-item prop="year">
            <el-date-picker
              v-model="search.year"
              type="year"
              placeholder="请选择年份"
              value-format="YYYY"
            />
          </el-form-item>
        </el-space>
      </template>
      <template #dTableRight="data">
        <el-button @click="handleExcel(data)" type="primary"
          >导出Excel</el-button
        >
      </template>

      <template #num="data">
        <div
          @click="handleClick(data.data)"
          style="color: blue; cursor: pointer"
        >
          {{ data.data.num }}
        </div>
      </template>
    </d-table-search>
    <AssessmentDialog v-model="showDialog" :data="cellData" />
  </div>
</template>

<script setup>
import DTableSearch from "@/components/Table/tableList.vue";
import AssessmentDialog from "./assessmentDialog.vue";

import { getZtcRedBlackList } from "@/api/assessment/index";

import { ref } from "vue";

import useUserStore from "@/store/modules/user";
const userStore = useUserStore();

const showDialog = ref(false);
const tableRef = ref(null);
const cellData = ref({});
const columns = [
  {
    type: "index",

    label: "序号",
    width: 62,
  },
  {
    prop: "plateNo",

    label: "车牌号",
  },
  {
    prop: "year",
    label: "考核年度",
  },
  {
    prop: "quarterName",
    label: "考核季度",
  },
  {
    prop: "num",
    label: "预警次数",
    slotName: "num",
  },
];
const code = ref({});
const handleRequest = (params, done) => {
  code.value = params;
  getZtcRedBlackList(params).then((res) => {
    done({ data: res.rows, total: res.total });
  });
};
const { proxy } = getCurrentInstance();

const handleExcel = (data) => {
  proxy.download(
    "business/black/export",
    { ...code.value, ...data.data },
    `dict_${new Date().getTime()}.xlsx`
  );
};
const handleClick = (data) => {
  cellData.value = data;
  showDialog.value = true;
};
</script>
